<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示格式化日期时间</title>
  <script type="text/javascript" src="../../js/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
</head>
<body>
<div id="app">
  <h2>显示格式化日期时间</h2>
  <p>{{date}}</p>
  <p>格式化时间后：{{date | dataString}}</p>
  <p>年月日：{{date | dataString('YYYY-MM-DD')}}</p>
  <p>时分秒：{{date | dataString('hh:mm:ss')}}</p>
</div>
</body>
</html>
<script>
  // var moment = require('moment');
  //自定义过滤器
  Vue.filter('dataString',function (value,format='YYYY-MM-DD HH:mm:ss'){//形参默认值
    return moment(value).format(format); // 七月 11日 2021, 6:10:52 晚上
  })

  const VM = new Vue({
    el: '#app',
    data: {
      date: new Date()
    }
  })
</script>